<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#result{
				width:305px;
				height:80px
			}
			button{
				 width: 100px;
				 height: 80px;
			}
			button:hover{
				background-color: #d0d0d0;
			}
		</style>
		<script type="text/javascript">
			function back(){
				const res=document.getElementById("result")//为什么这里不加value？
				const chars=res.value.split('')
				chars.pop()//删除最后一个字符
				res.value = chars.join('');//按照指定分隔符将数组的所有元素拼接为字符串并返回 
					}
			function empty(){
				document.getElementById('result').value = '';
			
			}
			function cal(op){
				document.getElementById("result").value+=op
				let result=document.getElementById("result").value
				
			}
			function end() {
            try {
                const result = eval(document.getElementById('result').value);
               document.getElementById("result").value = result.toFixed(15)-0
            } catch (error) {
                document.getElementById('result').value = '错误';
            }
			
        }
		</script>
	</head>
	<body>
		<div id="buttons">
			<input type="text" id="result" >
			<button  onclick="back()">←</button>
			<br>
			<button id="empty" onclick="empty()">C</button>
			<button onclick="cal('(')">(</button>
			<button onclick="cal(')')">)</button>
			<button class="op" onclick="cal('%')">%</button>
			<br>    
			<button onclick="cal('7')">7</button>
			<button onclick="cal('8')">8</button>
			<button onclick="cal('9')">9</button>
			<button class="op" onclick="cal('+')">+</button>
			<br>
			<button onclick="cal('4')">4</button>
			<button onclick="cal('5')">5</button>
			<button onclick="cal('6')">6</button>
			<button class="op" onclick="cal('-')">-</button>
			<br>            
			<button onclick="cal('1')">1</button>
			<button onclick="cal('2')">2</button>
			<button onclick="cal('3')">3</button>
			<button class="op" onclick="cal('*')">*</button>
			<br>           
			<button onclick="cal('0')">0</button>
			<button onclick="cal('.')">.</button>
			<button class="op" onclick="end()">=</button>
			<button class="op" onclick="cal('/')">/</button>
		</div>
	</body>
</html>
